Gatsby JS: ساخت وبلاگ PWA با GraphQL، React و WordPress [ویدئو]

Gatsby JS: Build PWA Blog with GraphQL, React and WordPress [Video]

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: Gatsby JS یک چارچوب رایگان و منبع باز مبتنی بر React است که به توسعه‌دهندگان کمک می‌کند تا مولدهای سایت ایستا و سریع بسازند که می‌توانند وب‌سایت‌ها و برنامه‌ها را ایجاد کنند. اما به چه معنی است؟ خوب، بهترین بخش‌های React، Webpack، React-router، GraphQL و دیگر ابزارهای جلویی را ترکیب می‌کند و یک ابزار شگفت‌انگیز ایجاد می‌کند که توسعه‌دهندگان می‌توانند از استفاده از آن لذت ببرند! با Gatsby.js، می توانید از فناوری وب مدرن بدون دردسر استفاده کنید. همه چیز راه اندازی خواهد شد، منتظر شما برای شروع ساخت. یکی از بهترین چیزهای گتسبی این است که می‌توانید داده‌های خود را از CMS بدون هد، APIها، پایگاه‌های داده یا سیستم‌های فایل وارد کنید. هیچ محدودیتی وجود ندارد. حتی می‌توانید داده‌ها را از وردپرس تهیه کنید و این باعث می‌شود تا مشتریان بتوانند با وب‌سایتی که برای آنها ساخته‌اید تعامل داشته باشند و محتوای جدید اضافه کنند. آنها فقط باید پست های خود را در وردپرس به روز کنند و تمام. همچنین، با گتسبی، وب سایتی با فناوری دهه گذشته نمی سازید. آینده وب، تلفن همراه، جاوا اسکریپت و APIها است - JAMstack. هر وب سایت یک برنامه وب است و هر برنامه وب یک وب سایت است. با گتسبی، بسیار آسان است که پروژه خود را به یک برنامه وب پیشرو استاتیک (PWA) تبدیل کنید. کدها و داده‌ها را در خارج از جعبه تقسیم می‌کنید. گتسبی فقط HTML، CSS، داده ها و جاوا اسکریپت مهم را بارگیری می کند تا سایت شما در سریع ترین زمان ممکن بارگیری شود. پس از بارگیری، گتسبی منابع را برای صفحات دیگر واکشی می کند، بنابراین کلیک کردن در اطراف سایت فوق العاده سریع است. Gatsby.js سریع ترین وب سایت ممکن را می سازد. به جای منتظر ماندن برای تولید صفحات در صورت درخواست، صفحات را از قبل بسازید و آنها را در یک ابر جهانی از سرورها قرار دهید - آماده تحویل فوری به کاربران شما در هر کجا که هستند. تمامی کدها و فایل های پشتیبان این دوره در دسترس هستند - https://github.com/PacktPublishing/Gatsby-JS-Build-PWA-Blog-with-GraphQL-React-and-WordPress- نحوه ایجاد وب سایت های سریع و شگفت انگیز با Gatsby.js نحوه استفاده از استارتر گتسبی نحوه استفاده از CSS جهانی و CSS ماژول در Gatsby JS نحوه استفاده از GraphQL نحوه استفاده از طرح بندی در گتسبی نحوه استفاده از علامت نشانه گذاری به عنوان منبع داده چگونه از وردپرس برای منبع داده استفاده کنیم چگونه وب سایت خود را سئو بهینه کنیم نحوه انجام ممیزی وب سایت Lighthouse و بهبود امتیاز نحوه استقرار وب سایت خود با Netlify نحوه استقرار مداوم با GitHub و Netlify نحوه استفاده از webhook ها با توسعه دهندگان Netlify، WordPress و GitHub Beginner React JS که می خواهند وب سایت های ایستا سریع، بهینه شده با سئو و سئو را با Gatsby.js ایجاد کنند نویسنده نحوه راه اندازی و ایجاد یک برنامه را از ابتدا با استفاده از گتسبی و وردپرس نشان می دهد. * Gatsby.js سریع ترین وب سایت ممکن را می سازد.

سرفصل ها و درس ها

تنظیمات محیطی و مراحل اولیه Environment Settings and First Steps

  • معرفی Introduction

  • راه اندازی محیط زیست گتسبی و پروژه اول Gatsby Environment Setup and First Project

  • تنظیم VSCode به ذخیره خودکار Setting VSCode To AutoSave

مقدمه ای بر گتسبی جی اس Introduction to Gatsby JS

  • استارتر گتسبی Gatsby Starters

  • ایجاد صفحات در گتسبی Creating Pages in Gatsby

  • جهت یابی Navigation

  • اجزای گتسبی Gatsby Components

مفاهیم پیشرفته و سبک های CSS Advanced Concepts & CSS Styles

  • سبک های جهانی CSS و ماژول CSS CSS Global Styles and Module CSS

  • React-Bootstrap Components React-Bootstrap Components

  • پست ها را به صفحه اصلی ما اضافه کنید Add Posts to our Homepage

  • برخی تغییرات در کامپوننت ها Some Changes to Components

  • تعمیر NavLinks و Footer هنگام ارسال چندین پست Fixing NavLinks And Footer When Multiple Posts

  • افزودن صفحه درباره ما و صفحه تماس با ما Adding About Us Page & Contact Us Page

  • استفاده از Layouts در گتسبی Using Layouts in Gatsby

پلاگین GraphQL & Markdown Remark به عنوان منبع GraphQL & Markdown Remark Plugin as Source

  • مقدمه GraphQL GraphQL Introduction

  • افزودن افزونه های منبع Adding Source Plugins

  • پلاگین Markdown Transformer Remark Markdown Transformer Remark Plugin

  • GraphQL در کامپوننت GraphQL in Component

  • نگاشت پست ها و رندر GraphQL Mapping GraphQL Posts and Rendering

  • ایجاد Slugs برای پست های ما Creating Slugs for Our Posts

  • ذخیره اسلاگ در گره ها Saving Slugs in Nodes

  • تکرار از طریق پرس و جو ما Iteration Through Our Query

  • ایجاد و حل قالب Template Creation and Resolving

  • ارائه مقالات Rendering Articles

  • رفع پیوندهای ReadMore و صفحه اصلی لوگو Fixing ReadMore Links and Logo Homepage

وردپرس Headless CMS & Gatsby WordPress Headless CMS & Gatsby

  • منبع وردپرس WordPress Source

  • لیست پست های وبلاگ وردپرس WordPress Blog Posts Listings

  • رندر تک پست وردپرس WordPress Single Post Rendering

بهینه سازی سئو SEO Optimizations

  • سئو و متاتگ ها SEO and Metatags

  • نصب React Helmet Installing React Helmet

  • متادیتای سایت (SEO) Site Metadata (SEO)

  • ساخت مؤلفه سئو Building SEO Component

  • پایان بخش سئو SEO Component Finish

  • سئو در Layouts SEO in Layouts

استقرار پروژه و بهینه سازی امتیاز فانوس دریایی Deploying Project & Optimizing Lighthouse Score

  • استقرار با Netlify و GitHub Deploy with Netlify & GitHub

  • حسابرسی فانوس دریایی Lighthouse Audit

  • تنظیمات وب هوک Github-Netlify Github-Netlify Webhook Settings

  • بهینه سازی امتیاز دسترسی Optimize Accessibility Score

  • بهینه سازی امتیاز دسترس پذیری V2 Optimize Accessibility Score V2

  • امتیاز کامل و رفع گزیده Perfect Score and FIX of Excerpts

برنامه وب پیشرو (PWA) و وب هوک های وردپرس Progressive Web App (PWA) & WordPress Webhooks

  • (PWA) پیکربندی برنامه وب پیشرو (PWA) Progressive Web App Configuration

  • وب هوک های وردپرس WordPress Webhooks

نمایش نظرات

Gatsby JS: ساخت وبلاگ PWA با GraphQL، React و WordPress [ویدئو]
جزییات دوره
4 h 0 m
42
Packtpub Packtpub
(آخرین آپدیت)
1
5 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Rangel Stoilov Rangel Stoilov

توسعه دهنده وب و کارآفرین سلام! نام من Rangel است و اکنون 8 سال است که یک توسعه دهنده وب هستم. ابتدا من با Dreamweaver در روزها شروع کردم و وردپرس را به عنوان یک روش ساده برای ایجاد وب سایت مرور کردم. پس از آن می خواستم به توسعه وب بیشتر بپردازم ، بنابراین شروع به یادگیری زبان های برنامه نویسی مختلف مانند C # ، Java و JavaScript کردم. من یک رشته در Java با Spring Framework دارم و اکنون به دنبال تعمیق دانش خود در چارچوب های مختلف JavaScript هستم. من همچنین علاقه زیادی به Solidid and Smart Contracts و همچنین Truffle Framework دارم. من همچنین با انتشار و تجارت آمازون در بازار فارکس و همچنین ایجاد سیستم های خودکار برای تجارت در روحیه کارآفرینی غواصی کرده ام.